<template>
  <div class="interview">
    <div class="top">
      <!-- 顶部导航栏 -->
      <van-nav-bar
        title="面试题"
        class="title"
        right-text="答题卡"
        @click-right="onClickRight"
      >
        <template #left>
          <i
            class="iconfont iconbtn_nav_back"
            style="font-size: 50px"
            @click="$router.back()"
          ></i>
        </template>
      </van-nav-bar>
    </div>

    <div class="bottom">
      <!-- 题目 -->
      <p class="question">【{{ types }}】{{ question }}</p>
      <div class="tag">
        <van-tag v-for="(item, index) in tag" :key="index" color="#f7f4f5">
          {{ item }}</van-tag
        >
      </div>
      <!-- 选项 -->
      <van-radio-group>
        <van-cell-group>
          <van-cell
            v-for="(item, index) in option"
            :key="index"
            :title="title[index]"
            clickable
            @click="select(index)"
          >
            {{ item }}
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <!-- 答案解析 -->
    <div class="analysis" v-if="visible">
      <h5>答案解析</h5>
      <p class="answer">正确答案：A</p>
      <div class="record">
        <span class="difficulty">难度:困难</span>
        <span class="submitNum">提交次数:12</span>
        <span class="correctNum">正确次数:5</span>
      </div>
      <p class="answerAnalysis">
        border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，
        但是除此之外，radius其实指的是边框所在圆的半径，这个CSS3属性不仅
        能够创建圆角，还可以创建椭圆角，
      </p>
    </div>

    <!-- 底部提交栏 -->
    <div class="bottom-box">
      <div class="content-wrap">
        <div class="left">
          <div class="icon-box">
            <span
              ><i
                class="iconfont iconbtn_shoucang_nor active"
                style="font-size: 25px"
              ></i
              >收藏</span
            >
            <span
              ><i
                class="iconfont iconbtn_shuati_fankui"
                style="font-size: 25px"
              ></i
              >反馈</span
            >
          </div>
          <div class="index-box">
            <span><span class="red">1 </span>/{{ total }}题</span>
          </div>
        </div>
        <div class="right">
          <van-button
            type="danger"
            @click="submit"
            :style="{ opacity: opaci }"
            :class="{ blue: isBlue }"
            >{{ tip }}</van-button
          >
        </div>
      </div>
    </div>

    <!-- 答题卡 -->
    <answerCard v-if="show" :isShow="show" @input="show = $event" />
  </div>
</template>

<script>
import answerCard from './components/answercard.vue'
import { getQuestionsAPI, submitAPI, questionDetailAPI } from '../../api'
// 导入枚举
import INTERVIEW from '@/api/constant/interview'

export default {
  components: { answerCard },
  // ,
  data () {
    return {
      show: false, //  控制答题卡显示
      visible: false, // 控制答案解析显示
      title: ['A.', 'B.', 'C.', 'D.'], // 每一个选项前的ABCD
      data: [], // 首次进入时面试题的数据
      option: [], // 每一题的选项
      total: 10, // 每一类题的总数
      tag: [], // 每题的标签
      question: '', // 题目
      id: 1, // 当前题目的id
      difficulty: 1, // 当前题目难度 1简单 2中等 3困难
      difficulties: '', // 显示题目难度
      tip: '', // 提交按钮文字
      types: '', // 题目类型，1单选，2多选 3简答
      type: '', // 题目类型，单双简
      flag: false, // 控制按钮透明度
      opaci: 0.1, // 按钮透明度
      allow: true, // 按钮禁用
      isBlue: false, // 按钮显示下一题时的颜色
      singleAnswer: '', // 单选答案
      multipleAnswer: [], // 多选答案
      answers: {} // 提交后获取的数据
    }
  },

  watch: {
    tip (newVal, oldVal) {
      if (newVal === '提交') {
        // 发送提交请求
        this.sendSubmit()
      } else if (newVal === '下一题') {
        // 发送发面试题详情请求
        this.sendDetail()
      }
    }
  },
  created () {
    this.getQuestion()
  },
  methods: {
    // 获取题目
    async getQuestion () {
      const res = await getQuestionsAPI({
        type: this.$route.query.type,
        city: this.$route.query.city
      })
      console.log('res:', res)
      if (res.data.code === 200) {
        // 首次进入时面试题的数据
        this.data = res.data.data
        // 总的题数
        this.total = res.data.data.length
        // 一题的选项
        this.option = res.data.data[0].detail.option
        // 每题的标签
        this.tag = res.data.data[0].detail.tag
        // 题目
        this.question = res.data.data[0].detail.title
        // 题目类型，1单选，2多选
        this.type = res.data.data[0].detail.type
        // 当前题目的id
        this.id = res.data.data[0].id
        // 当前题目难度
        this.difficulty = res.data.data[0].detail.title.difficulty
      }
      this.getType()
    },

    // 选择选项
    select (index) {
      console.log('index:', index)

      // 点击选项后提交按钮的颜色变化，显示提交
      this.flag = true
      this.opaci = 1
      this.tip = '提交'

      // 把选择题答案放进去
      if (this.type === 1) {
        // 单选
        this.singleAnswer = this.title[index]
        console.log('this.singleAnswer:', this.singleAnswer)
      } else if (this.type === 2) {
        // 多选
        this.multipleAnswer.push(this.title[index])
        console.log('this.multipleAnswer:', this.multipleAnswer)
      }
    },

    // 自定义题目类型
    getType () {
      const res = INTERVIEW.Type.filter((v) => {
        //
        if (v.id === this.type) {
          return true
        }
      })
      // console.log('res:', res)
      // 最后一页筛选出来的是空数组
      // 空数组[0]-->undefined
      // undefined.value 报错
      this.types = res[0] && res[0].value
    },
    // 自定义题目难度
    getDifficulty () {
      const res = INTERVIEW.Difficulty.filter((v) => {
        //
        if (v.id === this.difficulty) {
          return true
        }
      })
      // console.log('res:', res)
      // 最后一页筛选出来的是空数组
      // 空数组[0]-->undefined
      // undefined.value 报错
      this.difficulties = res[0] && res[0].value
    },

    // 点击显示答题卡
    onClickRight () {
      this.show = true
    },

    // 提交
    submit () {
      // 点击提交后按钮的文字变化
      this.tip = '下一题'
      // 按钮颜色
      this.isBlue = true
      // 按钮禁用状态
      // this.allow = false
      // 显示答案详情
      this.visible = true
    },

    // 发送提交请求
    async sendSubmit () {
      if (this.type === 1) {
        // 如果单选
        const dan = await submitAPI({
          id: this.id,
          singleAnswer: this.singleAnswer
        })
        console.log('dan:', dan)
      } else if (this.type === 2) {
        // 如果多选
        const duo = await submitAPI({
          id: this.id,
          multipleAnswer: this.multipleAnswer
        })
        console.log('duo:', duo)
      }
    },

    // 发送面试题详情请求
    async sendDetail () {
      const res1 = await questionDetailAPI(this.id)
      console.log('res1:', res1)
    }
  }
}
</script>

<style lang="less" scoped>
.interview {
  .top {
    .van-nav-bar__text {
      color: black !important;
    }
  }

  .bottom {
    padding: 14px 14px;
    .question {
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
    }
    .van-tag {
      color: #b4b4bd;
    }

    .van-radio-group {
      margin-top: 20px;

      .van-cell {
        border: 3px solid #f7f4f5;
        margin: 8px 0;
      }
      .van-cell__title {
        width: 20px;
        flex: none;
        font-size: 16px;
        margin-right: 5px;
      }
      .van-cell__value {
        text-align: left;
        color: #323233;
        font-size: 14px;
      }
    }
  }
  .analysis {
    padding: 14px 14px 76px 14px;
    .answer {
      color: skyblue;
    }
    .record {
      background-color: #eee;
      display: flex;
      font-size: 14px;
      justify-content: space-around;
      height: 30px;
      align-items: center;
    }
    .answerAnalysis {
      font-size: 16px;
    }
  }
  .bottom-box {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    .content-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px;
      .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;

        .icon-box {
          font-size: 12px;
          color: #b4b4bd;
          display: flex;
          span {
            margin: 0 14px;
            i {
              display: block;
              margin-bottom: 5px;
              &.active {
                color: red;
              }
            }
          }
        }
        .index-box {
          font-size: 16px;
          .red {
            color: red;
            font-size: 24px;
          }
        }
      }
      .right {
        .van-button {
          width: 100px;
          border-radius: 5px;
          margin-left: 50px;
        }
        .blue {
          background-color: #1989fa;
          border: #1989fa;
        }
      }
    }
  }
}
</style>
